<template>
  <div class="dailyFormInfo">
    <my-bread-crumb>
      <el-breadcrumb-item>信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>填报情况</el-breadcrumb-item>
    </my-bread-crumb>
    <el-card class="box-card">
      <!--查询表单      -->
      <el-form ref="dataFormRef" :model="data" label-width="80px" :inline="true">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="data.name"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="data.gender" placeholder="请选择">
            <el-option label="男" value="男"></el-option>
            <el-option label="女" value="女"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="学院" prop="department">
          <el-input v-model="data.department"></el-input>
        </el-form-item>
        <el-form-item label="班级" prop="classname">
          <el-input v-model="data.classname"></el-input>
        </el-form-item>
        <el-form-item label="填写时间" prop="createTime">
          <el-date-picker
            v-model="data.createTime"
            type="date"
            placeholder="选择日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item class="form-button-item">
          <el-button type="primary" @click="submitForm">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
        <el-form-item class="export-button">
          <el-button type="primary" @click="exportExcel">导出excel文件</el-button>
        </el-form-item>
      </el-form>
      <!-- 信息展示    -->
      <el-table
        :data="result.records"
        stripe
        @sort-change="dateSortChange">
        <el-table-column type="index" label="#"></el-table-column>
        <el-table-column v-for="key in result.keys" :prop="key" :label="key"></el-table-column>
        <el-table-column prop="填报时间" label="填报时间" :formatter="dateFormatter" sortable="custom" width="100"></el-table-column>
      </el-table>
      <!-- 分页条   -->
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.current"
          :page-sizes="[5, 10, 20, 30]"
          :page-size="data.size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="result.total">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import {getFormList,getFormListExcel} from '@/network/admin'
import {formatDate} from '@/common/utils'
import MyBreadCrumb from "@/components/MyBreadCrumb";
export default {
  name: "DailyFormInfo",
  components: {MyBreadCrumb},
  data(){
    return{
      data:{
        current:1,
        size:10,
        name:'',
        gender:'',
        department:'',
        classname:'',
        createTime:new Date(),
        order:''
      },
      result:{
        total:0,
        pages:1,
        records:[],
        keys:[]
      }
    }
  },
  created() {
    this.getDailyForms();
  },
  methods: {
    //获取填报情况
    async getDailyForms() {
      const {data: res, code} = await getFormList(this.data);
      if (code == 200) {
        this.result.total = res.total;
        this.result.pages = res.pages;
        this.result.records = res.records;
        if (res.records != []) {
          this.result.keys = Object.keys(res.records[0]);
          let index = this.result.keys.indexOf("填报时间");
          this.result.keys.splice(index, 1);
        }
      } else {
        this.$message.error({message: '获取填报数据表失败', duration: 1000});
      }
    },
    //提交表单
    submitForm() {
      this.getDailyForms();
    },
    //重置表单
    resetForm() {
      this.$refs.dataFormRef.resetFields();
    },
    handleSizeChange(newValue) {
      this.data.size = newValue;
      this.data.current = 1;
      this.getDailyForms();
    },
    handleCurrentChange(newValue) {
      this.data.current = 1;
      this.getDailyForms();
    },
    //时间转换
    dateFormatter(row) {
      return formatDate(new Date(Date.parse(row.填报时间)), "yyyy-MM-dd hh:mm:ss");
    },
    //时间排序
    dateSortChange(column) {
      if (column.order) {
        if (column.order === "ascending") {
          this.data.order = "asc";
        }
        if (column.order === "descending") {
          this.data.order = "desc";
        }
      } else this.data.order = "";
      this.data.current = 1;
      this.getDailyForms();
    },
    //导出excel文件
    exportExcel() {
      getFormListExcel(this.data).then(res=>{
        let downloadFile=document.createElement('a');
        let blob=new Blob([res.data], {type:"application/vnd.ms-excel;charset=UTF-8"});
        downloadFile.href=window.URL.createObjectURL(blob);
        downloadFile.download=
          decodeURI(res.headers['content-disposition'].split('filename=')[1]);
        downloadFile.click();
        window.URL.revokeObjectURL(downloadFile.href);
      })
    }
  }
}
</script>

<style scoped>
  .form-button-item{
    margin-left:38px;
  }
  .el-form{
    border-bottom: 1px solid #EBEBEB;
  }
 .export-button{
   float:right;
 }
</style>
